微信公众号开发（二）网页授权

2020-12-22

字数统计: 1.1k字 | 阅读时长≈ 4分

引言

用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

步骤

具体而言，网页授权流程分为四步：
1、引导用户进入授权页面同意授权，获取 code
2、通过 code 换取网页授权 access_token（与基础支持中的 access_token 不同）
3、如果需要，开发者可以刷新网页授权 access_token ，避免过期
4、通过网页授权 access_token 和 openid 获取用户基本信息（支持 UnionID 机制）

一、用户同意授权，获取code

引导关注者打开如下页面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有 scope 参数对应的授权作用域权限。

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问。后续步骤，协同后台参照官方文档处理即可。

具体代码如下：

1.封装获取地址栏参数的方法

function getUrlCode (name) {
    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
    const r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return decodeURIComponent(r[2])
    }
    return null
  }

2.截取 url 中的 code

function getCode () {
    // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
    const code = getUrlCode('code')
    // 分环境打包配置中的 appID,从公众号中找appId
    const appId = process.env.appid
    // 分环境打包配置中的 url , 此处的url需要添加 http:// 或 https://
    const local = process.env.url
    console.log(code)
    console.log(appId)
    if (code == null || code === '') {
      console.log('获取code')
      location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
    } else {
      console.log('接口调用')
      getUnitCode(code)
    }
  }

参数说明：

参数	是否必填	说明
appid	是	公众号唯一标识
redirect_url	是	授权后重定向的回调链接地址，请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数

3.拿到 code 之后，就可以调用后台的接口去进行后续操作了

因为项目中，可能会根据有没有授权以及是否绑定手机号等需求来跳转不同的页面，所以，微信授权判断这些，可以单独写一个 js 文件，然后在 main.js 文件中引入。
最后附上完整代码

import login from '../api/login-api'
import router from '../router/index'

(function () {
  /**
   * 获取地址栏携带的参数
   * @param name
   * @returns {string}
   */

  function getUrlCode (name) {
    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
    const r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return decodeURIComponent(r[2])
    }
    return null
  }

  function getCode () {
    const code = getUrlCode('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
    const appId = process.env.appid
    const local = process.env.url
    console.log(code)
    console.log(appId)
    if (code == null || code === '') {
      console.log('获取code')
      location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
    } else {
      console.log('接口调用')
      getUnitCode(code)
    }
  }

  function getUnitCode (code) {
    const data = {
      code: code,
      userType: sessionStorage.getItem('userType'),
      userCode: sessionStorage.getItem('userCode')
    }
    login.getLogin(data).then(res => {
      // 业务逻辑，根据返回的信息，进行不同页面的跳转
    })
  }

  getCode()
})()

参考文档：网页授权

公众号配置可以参考我上一篇文章：微信公众号开发（一）准备工作
如果有 h5 跳转小程序的需求，可以参考我下一篇文章：h5 跳转小程序

本文作者： Gladysdrea
本文链接： https://gladysdrea.github.io/blogs/2020/12/22/WeChat/公众号/微信公众号开发（二）网页授权/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！